React Tableで行を選択する
行の選択機能を実装してみる
参考にするところ
変更点
Mock dataの構造を単純にする
列のネストをなくす
check boxではなく、行のhighlightで選択を表す
18:44:04
18:48:29 check box用の列をつくる関数をuseTableの引数にあとづけて渡しているみたい
なんだろうこれ？takker.icon
19:01:01 かいた
19:03:02 ん？でも外部からrefを作ってcomponentに渡してないぞ
19:11:36 API referenceを見てみたけど、関数からrefが渡されることはない
19:10:19 調べた
19:12:29 移植開始
19:12:58 <table>部分は変えなくていいみたい
選択内容をjsonで表示する部分だけコピーする
19:15:30 check boxの代わりにclickできるbuttonを置いておく
SelectButtonにする
TableToggleAllRowsSelectedPropsはcheck boxが前提のpropsみたい
まあ変換すれば他のcomponentにも渡せるけど
19:22:02 いやまて。on/offを保持するのだから、check boxでないとだめか？
styleを変えればcheck boxでもいける？
それとも自前でcomponentを作る？
19:45:34 作るの断念した
どうしても<div>を要素いっぱいにまで大きくできない
19:48:37 見つけた
これだと親の<td>/<th>も設定しないといけないのか……
19:52:19 使えた。できた
https://gyazo.com/e3d9ae9890df6923436c3a3f9a99b185
19:52:31 onclickを生やす
20:06:02 <tr>の段階で選択されているかどうか取得するにはどうすればいい
二重管理は避けたいので、useTableが渡す変数だけでなんとかしたい
theadを無視するなら、selectedRowIdsとmapの通し番号から検索できそう
20:20:41 できた
sub rowがない場合は、idに番号がそのまま入るみたい
sub rowがあるときは0.1みたいになる
20:21:34 選択行を削除できるようにしてみる
20:54:38 できた。が、値の更新で警告が出る
これは後で状態を親に伝える方法を調べ直したほうがよさそう
まだよくわかっていないみたいだ
もしくは、<div>をクリックしたタイミングで更新？
無理そうだったのでコードを削除した